/**
 * 矩阵树图
 * TreemapChartC (reactCharts)
 * @author zxy
 * @date  2020-12-10
 */
import React from 'react';
import { FirstHeaderC, SecondHeaderC, PrimaryC, TreemapChartC } from '../../components';
import { Row, Col, Button } from 'antd';

class TreemapChartsCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      series1: [
        {
          name: '股票', // First tree
          value: 0.4,
          children: [
            {
              name: '股票1', // First leaf of first tree
              value: 0.25,
              rate: 0.25,
            },
            {
              name: '股票2',
              value: 0.15,
              rate: -0.25,
            },
          ],
        },
        {
          name: '债券', // Second tree
          value: 0.3,
          children: [
            {
              name: '债券1', // Son of first tree
              value: 0.1,
              rate: 0.52,
            },
            {
              name: '债券2', // Son of first tree
              value: 0.2,
              rate: 0.12,
            },
          ],
        },
        {
          name: '基金', // Second tree
          value: 0.3,
          children: [
            {
              name: '基金1', // First leaf of first tree
              value: 0.1,
              rate: -0.1,
            },
            {
              name: '基金2', // Second leaf of first tree
              value: 0.1,
              rate: -0.2,
            },
            {
              name: '基xxxxxxxxxxxxx金3', // Second leaf of first tree
              value: 0.1,
              rate: 0.3,
            },
          ],
        },
      ],
      series2: undefined,
    };

    setTimeout(() => {
      this.setState({
        series2: this.state.series1,
      });
    }, 3000);
  }

  render() {
    return (
      <div>
        <FirstHeaderC title='矩形树图' />
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='同步加载数据' />
            <TreemapChartC series={this.state.series1} type={1} height='500px' />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='异步加载数据' />
            <TreemapChartC series={this.state.series2} type={1} height='500px' />
          </Col>
        </Row>
      </div>
    );
  }
}

export default TreemapChartsCDemo;
